{% extends '__base__.html' %}

{% block title %}日志{% endblock %}
{% block beforehead %}
<style>
    blockquote {
        border-left: #eee solid 5px;
        padding-left: 20px;
    }

    ul li {
        line-height: 20px;
    }

    code {
        color: #D34B62;
        background: #F6F6F6;
    }
</style>
{% endblock %}
{% block content %}
<div class="container">
    {% if mode == 'list' %}
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="/blog?path=/{{ path | range_slice(0, loop.index) | join('/')}}&mode=list">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
                <button type="button" class="btn btn-primary"
                    onclick="location.assign('/blog/edit?path=/{{ path | join('/') }}')">新建文件</button>
            </div>
        </div>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md pb-4 table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th scope="col" width="6%">类型</th>
                        <th scope="col" width="10%">名称</th>
                        <th scope="col" width="10%">作者</th>
                        <th scope="col" width="20%">摘要</th>
                        <th scope="col" width="10%">状态</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">修改时间</th>
                        <th scope="col" width="6%">删除</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in blogs %}
                    <tr class="item" style="cursor: pointer;">
                        {% if item.content_type == 'd' %}
                        <th scope="row"><i class="fa fa-folder-o"></i></th>
                        <td><a href="/blog?path=/{{ path | join('/') }}/{{ item.name }}">{{ item.name }}</a></td>
                        {% else %}
                        <th scope="row"><i class="fa fa-file-o"></i></th>
                        <td><a href="/blog/view?path=/{{ path | join('/') }}&id={{ item.id }}">{{ item.name }}</a></td>
                        {% endif %}
                        <td>{{ item.user_id }}</td>
                        <td>{{ item.summary }}</td>
                        <td>{{ item.status | blog_status_filter }}</td>
                        <td><span>{{ item.created_at }}</span></td>
                        <td>{{ item.updated_at }}</td>
                        <td><button class="btn btn-sm delete" data-path="{{ item.path }}" data-name="{{ item.name }}"
                                data-id="{{ item.id }}"><i class="fa fa-trash-o"></i></button></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if page.total_page > 0 %}
            <nav aria-label="Page navigation example" style="cursor: pointer;">
                <ul class="pagination">
                    <li {% if page.pre %} class="page-item" {% else %} class="page-item disabled" {% endif %}>
                        <a class="page-link" {% if page.pre %}
                            href="/blog?path=/{{ path | join('/') }}&index={{page.index - 1}}" {% endif %}
                            aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% if page.total_page <= 5 or page.index <= 3 %}
                    {% for index in range(1, page.total_page + 1) %}
                    {% if index == page.index %}
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="/blog?path=/{{ path | join('/') }}&index={{index}}">{{ index }} <span
                                class="sr-only">(current)</span></a>
                    </li>
                    {% else %}
                    <li class="page-item"><a class="page-link"
                            href="/blog?path=/{{ path | join('/') }}&index={{index}}">{{ index }}</a></li>
                    {% endif %}
                    {% endfor %}
                    {% endif %}

                    {% if page.total_page > 5 and page.index >= page.total_page - 3 %}
                    {% for index in range(page.total_page - 4, page.total_page + 1) %}
                    {% if index == page.index %}
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="/blog?path=/{{ path | join('/') }}&index={{index}}">{{ index }} <span
                                class="sr-only">(current)</span></a>
                    </li>
                    {% else %}
                    <li class="page-item"><a class="page-link"
                            href="/blog?path=/{{ path | join('/') }}&index={{index}}">{{ index }}</a></li>
                    {% endif %}
                    {% endfor %}
                    {% endif %}

                    {% if page.total_page > 5 and page.index < page.total_page - 3 %}
                    {% for index in range(page.index - 2, page.index + 2) %}
                    {% if index == page.index %}
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="/blog?path=/{{ path | join('/') }}&index={{index}}">{{ index }} <span
                                class="sr-only">(current)</span></a>
                    </li>
                    {% else %}
                    <li class="page-item"><a class="page-link"
                            href="/blog?path=/{{ path | join('/') }}&index={{index}}">{{ index }}</a></li>
                    {% endif %}
                    {% endfor %}
                    {% endif %}
                    <li {% if page.next %} class="page-item" {% else %} class="page-item disabled" {% endif %}>
                        <a class="page-link" {% if page.next %}
                            href="/blog?path=/{{ path | join('/') }}&index={{page.index + 1}}" {% endif %}
                            aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link">
                            <span aria-hidden="true">{{ page.index }} / {{ page.total_page }}</span>
                        </a>
                    </li>
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
    <div id="popupRC" style="display:none;background-color: antiquewhite;width: 13em;" class="panel panel-primary">
        <!-- <div class="panel-heading ">Right Click Window</div> -->
        <div class="panel-body">
            <button class="dropdown-item status">
                状态
            </button>
        </div>
        {% endif %}

        {% if mode == 'detail' %}
        <div class="row">
            <nav class="col-md-8" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    {% with %}
                    {% for item in path %}
                    <li class="breadcrumb-item"><a
                            href="/blog?path=/{{ path | range_slice(0, loop.index) | join('/')}}&mode=list">{{ item }}</a>
                    </li>
                    {% endfor %}
                    {% endwith %}
                </ol>
            </nav>
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                    <button type="button" class="btn btn-primary"
                        onclick="location.assign('/blog/edit?path=/{{ path | join('/') }}&id={{ blog.id }}')"
                        data-path="/{{ path | join('/') }}">编辑</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="edit" class="col-6" style="display:none;height: 50vh;background-color: rgb(251, 241, 227);">
                <textarea name="content"
                    style="width: 100%;height: 100%;resize: none;">{% if blog.content %}{{ blog.content }}{% endif %}</textarea>
            </div>
            <div id="view" class="col-12"
                style="height: 50vh;background-color: rgba(153, 245, 191, 0.98);overflow-y: scroll;"></div>
            <input class="col-7 mt-1" name="name" placeholder="日志名称" disabled {% if blog.name %}value="{{ blog.name }}"
                {% endif %}>
            <textarea class="col-7 mt-2" name="summary" cols="3" placeholder="摘要" style="resize: none;"
                disabled>{% if blog.summary %}{{ blog.summary }}{% endif %}</textarea>
        </div>
        {% endif %}
        {% if mode == 'edit' %}
        <div class="row">
            <nav class="col-md-8" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    {% with %}
                    {% for item in path %}
                    <li class="breadcrumb-item"><a
                            href="/blog?path=/{{ path | range_slice(0, loop.index) | join('/')}}&mode=list">{{ item }}</a>
                    </li>
                    {% endfor %}
                    {% endwith %}
                </ol>
            </nav>
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                    <button type="button" id="save" class="btn btn-primary"
                        data-path="/{{ path | join('/') }}">保存</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="edit" class="col-6" style="height: 50vh;background-color: rgb(251, 241, 227);">
                <textarea name="content"
                    style="width: 100%;height: 100%;resize: none;">{% if blog.content %}{{ blog.content }}{% endif %}</textarea>
            </div>
            <div id="view" class="col-6"
                style="height: 50vh;background-color: rgba(153, 245, 191, 0.98);overflow-y: scroll;"></div>
            <input class="col-7 mt-1" name="name" placeholder="日志名称" {% if blog.name %} value="{{ blog.name }}"
                {% endif %}>
            <textarea class="col-7 mt-2" name="summary" cols="3" placeholder="摘要"
                style="resize: none;">{% if blog.summary %}{{ blog.summary }}{% endif %}</textarea>
            {% if blog %}
            <input type="hidden" name="id" {% if blog.id %}value="{{ blog.id }}" {% endif %}>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% endblock %}

    {% block beforebody %}
    <script src="{{ static_url }}/showdown/showdown.js"></script>
    <script>
        function text2html(text) {
            let converter = new showdown.Converter();
            return converter.makeHtml(text);
        }
    </script>
    {% if mode == 'list' %}
    <script>
        $(".fileitem").bind('contextmenu', function (event) {
            event.preventDefault()
            $("#popupRC .showfile").css({ display: "block" })
            $("#popupRC").css({ position: "absolute", top: event.pageY, left: event.pageX, display: "block" });
        })
        document.querySelector('main').addEventListener('click', () => {
            $('#popupRC').css({ display: 'none' });
        }, false)
        // 新建文件夹
        document.querySelector('#mkdir button').addEventListener('click', event => {
            let el = event.target
            let parent = el.dataset["path"]
            let name = el.parentNode.querySelector('input').value
            axios.get('/blog/mkdir/' + name, {
                params: {
                    parent: parent,
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            location.assign('/blog?path=' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
        document.querySelectorAll('tbody .delete').forEach(el => {
            el.addEventListener('click', function (event) {
                let el = event.target
                while (el.tagName !== 'BUTTON') {
                    el = el.parentNode
                }
                let id = el.dataset["id"]
                let path = el.dataset["path"]
                let name = el.dataset["name"]
                if (confirm('删除路径[' + path + ']下的' + name)) {
                    axios.get('/blog/delete/' + id)
                        .then(function (response) {
                            // console.log(response);
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    console.log('SUCCESS: ' + data['msg'])
                                    location.assign('/blog?path=' + path)
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                    alert(data['msg'])
                                }
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            })
        })
    </script>
    {% endif %}
    {% if mode == 'edit' %}
    <script>
        let edit = document.querySelector('#edit textarea')
        let view = document.querySelector('#view')
        let save = document.querySelector('#save')
        if (edit.value.length > 0) {
            view.innerHTML = text2html(edit.value);
        }
        if (edit) {
            edit.addEventListener('keyup', function (event) {
                view.innerHTML = text2html(event.target.value);
            }, false)
        }
        if (save) {
            save.addEventListener('click', function (event) {
                let content = document.querySelector('#edit').parentNode.querySelector('[name=content]').value
                let name = document.querySelector('#edit').parentNode.querySelector('[name=name]').value
                let summary = document.querySelector('#edit').parentNode.querySelector('[name=summary]').value
                let id = document.querySelector('#edit').parentNode.querySelector('[name=id]').value
                let path = event.target.dataset['path']
                axios.post('/blog/edit', {
                    content: content,
                    name: name,
                    summary: summary,
                    path: path,
                    id: id
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                location.assign('/blog?path=' + path)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }, false)
        }
    </script>
    {% endif %}
    {% if mode == 'detail' %}
    <script>
        let edit = document.querySelector('#edit textarea')
        let view = document.querySelector('#view')
        let save = document.querySelector('#save')
        let text = edit.value
        let converter = new showdown.Converter();
        let html = converter.makeHtml(text);
        view.innerHTML = html;
    </script>
    {% endif %}
    {% endblock %}